import React from 'react';
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import {Tooltip} from "@material-ui/core";
import {useDispatch} from "react-redux";
import MenuDropDown from "../../../../Common/MenuDropDown/MenuDropDown";
import {selectDeselectAnalysisMethodMap} from "../../../../../../../redux/reducers/editor";
import HelpIcon from "@material-ui/icons/Help";

export default function AnalysisMappingChoices(props) {
  const {
    classes,
    analysisInput,
    selectedMappingAnalysisInputAttributesData,
    activityAttributesData
  } = props;

  // Local constants
  const dispatch = useDispatch();

  const handleChooseSelection = (label, value) => {
    let newSelectedAnalysisMapping = selectedMappingAnalysisInputAttributesData;
    newSelectedAnalysisMapping = newSelectedAnalysisMapping.filter(a => a.inputPort.id !== analysisInput.id);

    newSelectedAnalysisMapping.push({
      inputPort: analysisInput,
      outputPort: value
    })
    dispatch(selectDeselectAnalysisMethodMap(newSelectedAnalysisMapping));
  };

  return (
    <>
      <Grid container justify="space-between" alignItems="center" className={classes.gutterTopBottom}>
        <Grid item xs>
          <Grid container alignItems="center">
            <Typography>{analysisInput.title} {!analysisInput.required ? '(Not required)' : ''}</Typography>
            <Tooltip arrow placement="right-start" title={
              <Typography>{analysisInput.description}</Typography>
            }>
              <IconButton> <HelpIcon/> </IconButton>
            </Tooltip>
          </Grid>
        </Grid>
        <Grid item xs>
          <MenuDropDown
            displayLabel={"Select an attribute..."}
            showType={true}
            parameterName={"choiceInput"}
            boxType={"standard"}
            source={activityAttributesData.filter(a => a.type === analysisInput.type)}
            value={selectedMappingAnalysisInputAttributesData.filter(a => a.inputPort.id === analysisInput.id).length !== 0 ?
              selectedMappingAnalysisInputAttributesData.filter(a => a.inputPort.id === analysisInput.id)[0].outputPort.name : ""}
            handleSelection={handleChooseSelection}
          />
        </Grid>
      </Grid>
    </>
  );
}
